<template>
  <view v-if="incentiveOpen" class="container">
    <UniForms :modelValue="formData" ref="formRef">
      <UniFormsItem
        label="撮合激励"
        name="matchmakeStatus"
        labelPosition="top"
        :tip="{
          showTip: true,
          title: '撮合激励分润',
          content: `激励内容仅供秘书处成员可见；
本设置是将发布者提出的撮合激励，分出部分给其他推广撮合激励的秘书处成员，其他秘书处成员看到的激励将是供需服务专员设置的激励金额。
为了更好的服务会员，增加供需合作成功率，建议合理设置激励分配。`,
        }"
      >
        <view class="fz-14 linh-20" style="color: #999996">
          如果修改撮合激励，其他推广者看到的将是您修改后的激励内容：
        </view>
      </UniFormsItem>

      <UniFormsItem label="当前激励：" labelWidth="100" name="estimatedScale">
        <text v-if="incentiveType == IncentiveTypeEnum.Commission">
          预估规模{{ estimatedScale }}，预估成交佣金{{ currPromotionCommissionRate }}%
        </text>
        <text class="break-all" v-else>{{ currIncentiveDetails }}</text>
      </UniFormsItem>

      <UniFormsItem
        v-if="incentiveType === IncentiveTypeEnum.Commission"
        label="调整激励：成交佣金"
        name="promotionCommissionRate"
        :contentRight="true"
        labelWidth="200"
        :required="false"
        :rules="[{ required: false, errorMessage: '请填写调整激励：成交佣金' }]"
      >
        <view
          class="disFlxAC br-4 pr-16 pl-6 py-4"
          style="background-color: #f2f3f5; width: 240rpx"
        >
          <FormInput v-model:model-value="formData.promotionCommissionRate" :input-border="false" />
          <text>%</text>
        </view>
      </UniFormsItem>

      <UniFormsItem
        v-if="incentiveType === IncentiveTypeEnum.Other"
        label="调整激励："
        name="distributeRemarks"
        labelPosition="top"
        :required="false"
        :rules="[{ required: false, errorMessage: '请填写调整激励' }]"
      >
        <view class="pa-8" style="background-color: #f2f3f5">
          <FormInput
            v-model:model-value="formData.distributeRemarks"
            :input-border="false"
            :maxlength="60"
            type="textarea"
            placeholder="例如：赠送本店3次xx项目免费体验"
            :autoHeight="true"
            :styles="{
              height: '160rpx',
              backgroundColor: 'transparent',
            }"
          />
        </view>
      </UniFormsItem>

      <UniFormsItem label="调整后激励：" labelWidth="150">
        <text class="break-all">
          {{
            getIncentiveDetails({
              estimatedScale: estimatedScale,
              incentiveOpen: incentiveOpen,
              incentiveType: incentiveType!,
              showIncentiveDetails: formData.distributeRemarks!,
              showCommissionRate: formData.promotionCommissionRate!,
            })
          }}
        </text>
      </UniFormsItem>
    </UniForms>
  </view>
</template>
<script setup lang="ts">
  /**供需表单-撮合信息 */
  import { reactive, ref, watch, type PropType } from 'vue';
  import UniForms from '@/components/Form/uni_modules/uni-forms/uni-forms.vue';
  import UniFormsItem from '@/components/Form/uni_modules/uni-forms-item/uni-forms-item.vue';

  import FormInput from '@/components/Form/components/FormInput.vue';
  import { IncentiveOpenEnum, IncentiveTypeEnum } from '@/enums/businessOpportunitiesEnum';
  import { getIncentiveDetails } from '../../../components/utils';

  const props = defineProps({
    /** 撮合开关；0:否;1是 */
    incentiveOpen: {
      type: Number as PropType<IncentiveOpenEnum>,
    },
    /** 撮合激励类型: 1佣金激励；2:其他激励 */
    incentiveType: {
      type: Number as PropType<IncentiveTypeEnum>,
    },
    /** 撮合佣金比例 */
    promotionCommissionRate: {
      type: String,
      default: undefined,
    },
    /** 撮合说明 */
    distributeRemarks: {
      type: String,
      default: '',
    },
    /** 当前撮合说明 */
    currIncentiveDetails: {
      type: String,
      default: '',
    },
    /** 当前撮合佣金比例 */
    currPromotionCommissionRate: {
      type: String,
      default: undefined,
    },
    /** 预估规模 */
    estimatedScale: {
      type: String,
      default: '',
    },
  });

  const formData = reactive<{ promotionCommissionRate?: string; distributeRemarks?: string }>({
    promotionCommissionRate: void 0,
    distributeRemarks: void 0,
  });

  watch(
    () => props,
    (val) => {
      formData.promotionCommissionRate = props.promotionCommissionRate;
      formData.distributeRemarks = props.distributeRemarks;
    },
    { deep: true, immediate: true },
  );

  const formRef = ref<InstanceType<typeof UniForms>>();
  const submit = async () => {
    if (!formRef.value) return formData;
    await formRef.value.validate();
    return formData;
  };

  defineExpose({ submit });
</script>
<style lang="scss" scoped></style>
